<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>WebGL WebCL image editor</title>
        <link href='http://fonts.googleapis.com/css?family=Viga' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css">
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/jquery-ui-1.8.16.custom.min.js"></script>
        <script src="js/jquery.mousewheel.min.js"></script>
        <script src="js/ui.js"></script>
        <script src="js/editor.js"></script>
    </head>
    <body oncontextmenu="return false;">
        <div id="titletext">WebGL WebCL Image Editor</div>
      
        <canvas id="canvas">

        </canvas>
        
        <canvas id="thebrush" height="170" width="170"></canvas>

        <section id="modeselector" style="display: block;">
            <div id="modeselectorbuttons">
                <div class="button" id="menuColorize">
                    Colorize
                </div>
                <div class="button" id="menuEffects">
                    Effects ▼
                    <ul>
                        <li data-name="sharpen">Sharpen</li>
                        <li data-name="blur">Blur</li>
                        <li data-name="findedges">Find edges</li>
                        <li data-name="effect3">Effect 3</li>
                        <li data-name="effect4">Effect 4</li>
                    </ul>
                </div>
                <div class="button" id="menuCrop">
                    Crop ▼
                    <ul>
                        <li data-name="4_3">4:3</li>
                        <li data-name="3_4">3:4</li>
                        <li data-name="16_9">16:9</li>
                        <li data-name="free">Free</li>
                    </ul>
                </div>
            </div>
            <footer>
                <div id="filemenubutton" class="button">File</div>

                <div id="imagelistwrapper">
                    <div id="imagelist">
                        <img data-href="images/cuba.jpg" src="images/cuba_thumb.jpg" alt="" />
                        <img data-href="images/dog.jpg" src="images/dog_thumb.jpg" alt="" />
                        <img data-href="images/dog2.jpg" src="images/dog2_thumb.jpg" alt="" />
                        <img data-href="images/greenthing.jpg" src="images/greenthing_thumb.jpg" alt="" />
                        <img data-href="images/porsche.jpg" src="images/porsche_thumb.jpg" alt="" />
                        <img data-href="images/redcar.jpg" src="images/redcar_thumb.jpg" alt="" />
                        <img data-href="images/redcar2.jpg" src="images/redcar2_thumb.jpg" alt="" />
                    </div>
                </div>

                <div id="previmages" class="button">◀</div>
                <div id="nextimages" class="button">▶</div>
            </footer>
        </section>
        
        <section id="colorchanger">
            <div class="button dialog">
                <h1>Hue</h1>
                <div id="hueslider" class="slider"></div>
                
                <h1>Saturation</h1>
                <div id="saturationslider" class="slider"></div>
                
                <div class="hidedialog button">▲</div>
            </div>
        </section>
        
        <section id="effectsdialog">
            <div class="button dialog">
                <h1>Effect name</h1>
                
                <div id="effectslider" class="slider"></div>
                
                <div class="hidedialog button">▲</div>
            </div>
        </section>
        
        <section id="maskselection">
            <div class="button" id="brushpreview">
                <canvas id="brushsize" height="160" width="160">
                    
                </canvas>
            </div>
            
            <div id="maskbuttons">
                <div class="button" id="buttonBrush">
                    Brush<br />
                    Size ▶
                    <div id="brushsettings">
                        <div id="brushsizeslider"></div>
                    </div>
                </div>
                <div class="button" id="buttonInvertBrush">
                    Invert<br />
                    Brush
                </div>
                <div class="button" id="buttonInvertMask">
                    Invert<br />
                    Mask
                </div>
                <div class="button" id="buttonShowOriginal">
                    Show<br />
                    Original
                </div>
                
                <div class="button green" style="margin-top: 40px;" id="buttonSave">
                    Save
                </div>
                <div class="button red buttoncancel">
                    Cancel
                </div>
            </div>
        </section>
        
        <section id="cropselection">
            <div id="cropselectionbuttons">
                <div class="button red buttoncancel">Cancel</div>
                <div class="button green" id="savecrop">Save</div>
            </div>
        </section>
        
        <img id="spinner" src="spinner.png" alt="" />
    </body>

</html>
